<template>
	<div class="app-container">
		<el-form ref="form" :model="form" :rules="DataFillingRules" label-width="140px">

			<div class="centered-form">
				<el-form-item label="旧密码" >
					<div style="display: flex; align-items: center;">
						<span class="demonstration"></span>
						<el-input class="long_input" v-model="form.oldPassword" placeholder="" show-password/>
						<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>
					</div>
				</el-form-item>
			</div>

			<div class="centered-form">
				<el-form-item label="新密码" prop="_long_enough">
					<div style="display: flex; align-items: center;" >
						<span class="demonstration"></span>
						<el-input class="long_input" v-model="form.newPassword" placeholder="" show-password/>
						<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>
					</div>
				</el-form-item>
			</div>

			<div class="centered-form">
				<el-form-item label="确认密码" prop="_same" >
					<div style="display: flex; align-items: center;">
						<span class="demonstration"></span>
						<el-input class="long_input" v-model="form.newPasswordConfirm" placeholder="" show-password/>
						<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>
					</div>
				</el-form-item>
			</div>

			<div class="centered-form">
				<el-form-item>
					<el-button class="custom-button" type="primary" @click="confirm"
							   :disabled="form.newPassword !== form.newPasswordConfirm && this.form.newPassword.length >= 6">
						提交
					</el-button>
				</el-form-item>
			</div>

		</el-form>
	</div>
</template>

<script>


import {changePassword} from "@/api/user";

export default {
	name: "changePasswordDialog",

	data() {
		const validateInputIsSame = (rule, value, callback) => {
			if (this.form.newPassword !== this.form.newPasswordConfirm){
				callback(new Error('两次输入的密码必须一致'));
			}
			else {
				callback();
			}
		}

		const validateInputLongEnough = (rule, value, callback) => {
			if (this.form.newPassword.length < 6) {
				callback(new Error('密码至少为6位'));
			}
			else {
				callback();
			}
		}

		return {
			form:{
				oldPassword: null,
				newPassword: null,
				newPasswordConfirm: null,
			},
			DataFillingRules: {
				_same: [{ trigger: "change", validator: validateInputIsSame }],
				_long_enough: [{ trigger: "change", validator: validateInputLongEnough }],
			},
		}
	},

	created() {
		// 1. 在页面加载时获取数据库数据并填充form字段
		this.getData();
	},

	methods: {
		confirm(){
			changePassword({
				oldPassword: this.form.oldPassword,
				newPassword: this.form.newPassword,
				userId: this.$store.getters.userId
			}).then(response => {
				this.$message({message: "修改成功！", type: "success"})
			})
		}
	}
}
</script>

<style scoped>
.line {
	text-align: center;
}

.short_input {
	width: 510px; /* 自定义宽度 */
}


.long_input {
	width: 400px; /* 自定义宽度 */
}


.centered-form {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh;*/
}

.centered-form2 {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh; */
}

.custom-button {
	width: 200px; /* Custom width for the buttons */
}

.return-button {
	position: absolute;
	top: 10px;
	left: 10px;
}

.return-button a {
	text-decoration: none;
	background-color: #0074d9;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.return-button a:hover {
	background-color: #0056b3;
}


</style>

